<template>
  <q-page :padding="!$q.platform.is.mobile">
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>

    <q-toolbar color="primary">
      <q-toolbar-title>今日订单统计</q-toolbar-title>
      <q-toolbar-title shrink class="text-right">
        <span slot="subtitle" class="text-right">
          <b style="color:white">{{model.userCount}}</b> 人
          <div>访问</div>
        </span>
      </q-toolbar-title>
      <q-toolbar-title shrink class="text-right">
        <span slot="subtitle" class="text-right">
          <b style="color:white">{{model.orderCount}}</b> 笔
          <div>支付</div>
        </span>
      </q-toolbar-title>
      <q-toolbar-title shrink>
        <span slot="subtitle" class="text-right">
          <b style="color:white">{{(model.amountTotal/100.0).toFixed(2)}}</b> 元
          <div>入账</div>
        </span>
      </q-toolbar-title>
    </q-toolbar>

    <q-list separator :no-border="$q.platform.is.mobile" 
        :style="$q.platform.is.desktop?'padding:8px;':''">

        <q-item style="padding:0;">
          <q-search icon="search" class="full-width no-shadow" :value="query" 
              inverted-light color="grey-2"
            placeholder="通过订单号、手机号搜索" autofocus="true"
            @clear="search('')" @change="search" clearable/>
        </q-item>

        <q-collapsible v-for="item in list" :key="'order_'+item.orderId">
          <template slot="header">
            <q-item-main>
              <q-item-tile label>用户手机：{{item.userPhone}}</q-item-tile>
              <q-item-tile sublabel>{{item.createTime.substring(0,19)}}</q-item-tile>
            </q-item-main>
            <q-item-side right>
              <b>{{status(item.orderStatus)}}</b>
              <div>{{item.movieName}}</div>
            </q-item-side>
          </template>
          <div>
            <ul>
              <li>订单编号：{{item.orderId}}</li>
              <li>用户手机：{{item.userPhone}}</li>
              <li>订单状态：<b>{{status(item.orderStatus)}}</b></li>
              <li>支付状态：<b>{{status(item.tradeStatus)}}</b></li>
              <hr/>
              <li>购票数量：{{item.ticketCount}}</li>
              <li>电影票码：{{item.ticketContent}}</li>
              <li>支付金额：{{item.tradeTotal?(item.tradeTotal/100).toFixed(2):''}}</li>
              <li>所选座位：{{item.seatInfo}}</li>
              <li>淘宝订单：{{item.taobaoId}}</li>
              <li>支付渠道：{{item.channel}}</li>
              <li>交易单号：{{item.tradeNo}}</li>
              <hr/>
              <li>影片名称：{{item.movieName}}</li>
              <li>开场时间：{{item.showTime.substring(0,19)}}</li>
              <li>影院名称：{{item.cinemaName}}</li>
              <li>影厅名称：{{item.hallName}}</li>
              <li>影院地址：{{item.address}}</li>
            </ul>
          </div>
        </q-collapsible>
      </q-list>

  </q-page>
</template>

<script>
export default {
  name: 'PageTicketQuery',
  data() {
    return {
      loading: false,  
      query: '',   
      list:[],
      model: {userCount:0,orderCount:0,amountTotal:0},
      intervalId: false
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageTitle = '订单查询'; 
    this.loadSummary();
    this.search('');
    this.intervalId = window.setInterval(() => {
        me.loadSummary();
    }, 60000);
  },
  destroyed() {    
    window.clearInterval(this.intervalId);
  },
  methods: {
    loadSummary() {
      let me = this;
      if (!me || me._isDestroyed) {
        return;
      }
      me.$api.ticket.loadSummary(res=>{
        me.model = res.data.model;
      });
    },
    status(val) {
      if("80SUCCESS" == val) { return "已出票"; }
      else if("99CANCEL" == val) { return "已作废"; }
      else if("98FAILURE" == val) { return "已失败"; }
      else if("50TICKETING" == val) { return "出票中"; }
      else if("01NEW" == val) { return "新订单"; }
      else if("20PAYING" == val) { return "待支付"; }
      else if("30PAYED" == val) { return "已支付"; }
      else if("40REFUND" == val) { return "已退款"; }
      return "";
    },
    search(val) {
      this.list = [];
      let me = this;
      me.loading = true;
      this.$api.ticket.searchOrders(val, res=>{
        me.list = res.data.model;
        me.loading = false;
      });
    }
  }
}
</script>

